<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="textArr" id="app">
        <p class="slice-enter-active" :style="{color:text.color}" :key="text.id" v-for="item in textArr">
            {{text.value}}</p>
    </div>
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    scroll: { //滚动公告
                        number: 0,
                        textArr: [{
                            value: '1.地图中玫瑰红图标表示用户当前选择的印章',
                            color: '#D4237A',
                        }, {
                            value: '2.地图中绿色图标表示印章在线状态',
                            color: '#67C23A',
                        }, {
                            value: '3.地图中红色图标表示印章离线状态',
                            color: 'red',
                        }, {
                            value: '4.如果选择印章无定位信息，地图将显示空白',
                            color: 'red',
                        }]
                    }

                };
            },
            computed: {
                text() {
                    return {
                        id: this.scroll.number,
                        value: this.scroll.textArr[this.scroll.number].value,
                        color: this.scroll.textArr[this.scroll.number].color,
                    }
                }
            },
            mounted() {
                //滚动公告
                this.startMove()
            },

            methods: {
                //滚动公告
                startMove() {
                    // eslint-disable-next-line
                    let timer = setInterval(() => {
                        if (this.scroll.number === this.scroll.textArr.length -1) {
                            this.scroll.number = 0;
                        } else {
                            this.scroll.number += 1;
                        }
                    }, 2000); 
                },
            }
        })
    </script>
</body>

</html>